<template>
    <div class="custom-select">
        <p class="name">
            {{name}}
            <i class="cubeic-close" @click="$emit('remove')"></i>
        </p>

        <!--S选项-->
        <ul id="options">
            <li v-for="(item,index) in options" :key="index">
                {{item}}
                <div class="delete" @click="removeOption(index)">
                    <i class="cubeic-delete"></i>
                </div>
            </li>
            <li>
                <cube-button
                        class="add-option"
                        :inline="true"
                        @click="addOption"
                >
                    添加选项
                </cube-button>
            </li>
        </ul>
        <!--E选项-->

    </div>
</template>

<script>
export default {
    name: "custom-select",
    data () {
        return {
            options: []
        }
    },
    props: {
        /**
         * 表单名字
         */
        name: {
            type: String,
            default: ''
        },
        /**
         * 表单组件类型
         */
        type: {
            type: String,
            default: 'radio'  // radio=单选 select=多选
        },
        /**
         * 组件列表排序下标
         */
        index: {
            type: Number,
            default: 0
        },
        /**
         * 选项
         */
        value: {
            type: Array,
            default () {
                return []
            }
        }
    },
    computed: {
        data () {
            return {
                type: this.type,
                index: this.index,
                options: this.options
            }
        }
    },
    mounted() {
        if(this.value.length > 0) {
            this.options = this.value
        }
    },
    methods: {
        /**
         * 添加单选选项
         */
        addOption() {
            let dialog = this.$createDialog({
                type: 'prompt',
                title: '添加单选选项',
                prompt: {
                    value: '',
                    placeholder: '选项名称'
                },
                onConfirm: (e, value) => {
                    dialog.remove()
                    this.options.push(value)
                    this.$emit('change',this.data)
                },
                zIndex: 10000
            }).show()
        },
        /**
         * 删除选项
         */
        removeOption(index){
            this.options.splice(index,1)
            this.$emit('change',this.data)
        }
    }
}
</script>

<style scoped lang="less">
    @import "@/theme.less";
    .name{
        position: relative;
        height: 35px;
        line-height: 35px;
        .cubeic-close{
            float: right;
            font-size: 25px;
            margin-right: 5px;
        }
        .add-option{
            position: absolute;
            right: 90px;
        }
        .del-option{
            position: absolute;
            right: 0;
        }
    }
    #options{
        overflow: hidden;
        li{
            position: relative;
            width: 50%;
            height: 40px;
            line-height: 40px;
            border-bottom: 1px solid #eee;
            float: left;
            &:last-child{
                border: none;
            }
            .delete{
                position: absolute;
                z-index: 30;
                right: 10px;
                top:0;
                width: 40px;
                height: 40px;
                text-align: center;
                color: red;
                i{
                    font-size: 23px;
                }
            }
        }
    }
</style>